<!doctype html>
<html>
    <head>
        <title>Test Grid</title>
        <style type="text/css">
            #myCan {
                border: thin black solid;
                width: 640;
                height: 800;
            }
        </style>
        <script>
            var app = {};
            app.ctx = function(){
                return document.getElementById("myCan").getContext("2d");
            };
            
        </script>
    </head>
    <body>
        <canvas height="640" width="800" id="myCan"> If you can see this, you're browser and probably your computer are inferior. </canvas>
        <script>
            var ctx = app.ctx();
            var runQueue = [];
            var running = false;
            var radius = 30;
            
            var handle = null;
            var runner = function(){
                if(runQueue.length === 0) return;
                    var func = runQueue.shift();
                    func();
            }
            
            handle = setInterval(runner, 10);
            
            function escalating(x, y, radius, start, stop){
                return function(){
                    ctx.beginPath();
                    //console.log("Calling ctx.arc with ", radius, start, stop);
                    ctx.arc(x, y, radius, start, stop, true);                    
                    ctx.stroke();
                };
            }
            
            var runOne = function(index, radius){
                var baseDegree = index * 10;
                var startAngle = ( Math.PI / 180 ) * baseDegree ;
                var endAngle = startAngle - ( 10 * ( Math.PI / 180));
                
                
                runQueue.push(escalating(400, 300, radius*10 - index, startAngle , endAngle ));
            }
            
            var i = 0;
            while(( radius*10 - i) > 0 ){
                runOne(i, 30);
                if(i > 10){
                    runOne(i-100, 25);
                }
                if(i > 20 ){
                    runOne(i-1000, 17);
                }
                if(i > 30 ){
                    runOne(i-1000, 7);
                }
                
                i++;
            }
            
            
            
            
        </script>
    </body>
</html>